<template>
  <div class="table-form-header">
    <el-form ref="listQuery" :model="listQuery" :rules="rules" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              <el-row>

                <el-col v-for="item in dataObject.dataComponent" :key="item.model" :span="item.span||6" >

                  <el-form-item :label-width="item.labelWidth||'120px'" :label="item.label" class="postInfo-container-item">
                    <!-- input-->
                    <el-input v-if="item.type=='input'" v-model="listQuery[item.model]"  class="filter-item" @keyup.enter.native="item.keyUpEnter" />
                    <!-- select-->
                    <el-select v-if="item.type=='select'" v-model="listQuery[item.model]" :placeholder="$t('basicEquipment.importance')" clearable style="width: 200px" class="filter-item">
                      <el-option v-for="e in item.option" :key="e" :label="e" :value="e" />
                    </el-select>
                    <!-- datepicker-->
                    <el-date-picker v-if="item.type=='datePicker'" v-model="listQuery[item.model]" />
                    <!-- dateRangepicker -->
                    <el-date-picker
                      v-if="item.type=='dateRangepicker'"
                      v-model="listQuery[item.model]"
                      type="datetimerange"

                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>
               <el-col :span="8" :offset="3">
                 <AllButton />
               </el-col>
              </el-row>

            </div>

          </el-col>
        </el-row>
      </div>
    </el-form>
    
  </div>
</template>
<script>
import waves from '@/directive/waves' // waves directive
import AllButton from '@/components/AllButton'
export default {
  name: 'ListSearchParams',
  directives: { waves },
  props: ['dataModel', 'fetchRequest'],
  components:{AllButton},
  data() {
    return {
      dataObject: this.dataModel,
      listQuery: this.dataModel,
     
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  watch: {
    listQuery: {
      handler: function(val) {
        this.$store.dispatch('basicEquipment/setListSearchParams', val).then(() => {
          // this.$emit('change')
          console.log(this.$store.state)
        })
      },
      deep: true
    }
  },
  created() {
   
    this.listQuery = this.$store.state.basicEquipment.listSearchParams || {} // 操作状态
  },
  methods: {
   
    // 搜索方法父组件传递方法过来
    handleFilter() {
      this.fetchRequest(this.listQuery)
    },
    // 重置,本组件自行处理
    handleReset() {
      this.listQuery = {}
      this.fetchRequest(this.listQuery)
    }
  }
}
</script>
